<template>
  <header class="header-bar">
    <div class="logo">
      <img src="../../assets/logo.png" alt="">
    </div>
    <div class="title">设备诊断台</div>
    <nav class="main-nav">
      <ul>
        <li>
          <router-link to="/dashboard/monitor">监控中心</router-link>
        </li>
        <li>
          <router-link to="/dashboard/diagnosis">设备诊断</router-link>
        </li>
        </li>
      </ul>
    </nav>
    <div class="state-container">
      <div class="user-msg">
        <img class="user-header-img" src="/static/images/avatar.png" alt="">
        <div class="user-name">
          <span>Admin</span>
        </div>
      </div>
      <div class="more">
        <span class="triangle"></span>
      </div>
    </div>


  </header>
</template>

<script>
import XArea from 'components/view/other/XArea'

export default {
  name: 'HeaderBar',

  components: {
    XArea
  },

  data () {
    return {}
  },

  computed: {},

  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/stylus/common'

.header-bar {
  fixed: left top;
  size: 100% 52px;
  min-width: 1000px;
  background: #1E1E1E;
  z-index: 100;

  .logo-box {
    clearfix()
    display: inline-block;
    height: 100%;
  }

  .logo {
    float: left;
    size: 33px;
    margin: 10px 10px 0 14px;

    img {
      display: inline-block;
      margin-bottom: 0;
      size: 100%;
    }
  }

  .title {
    float: left;
    color: #FFF;
    font-size: 18px;
    margin-top: 13px;
  }

  .main-nav {
    absolute left 350px top 0

    li {
      float: left;

      a {
        display: block;
        padding: 0 15px;
        line-height: 52px;
        color: #FFF;
        font-size: 14px;
        position: relative;

        &:hover {
          /*background-color: #DE4E58;*/

          /*&:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: #999;
          }*/
        }
      }

      .router-link-active {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          height: 3px;
          width: 100%;
          background: #999;
        }
      }
    }
  }

  .state-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 52px;
    padding: 8px;
    padding-right: 0;
    box-sizing: border-box;

    .user-msg {
      display: inline-block;
      width: 120px;
      height: 36px;
      line-height: 36px;
      border-right: 1px solid rgba(255,255,255,0.5);
      vertical-align: middle;

      .user-header-img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        border: 0;
        vertical-align: middle;
      }
      .user-name {
        display: inline-block;
        padding-left: 5px;
        font-size: 14px;
        vertical-align: middle;
      }
    }
    .more {
      display: inline-block;
      width: 40px;
      text-align: center;

      .triangle {
        triangle(#fff, 13px)
      }
    }

  }
}
</style>
